<template>
    <div>
            <el-drawer 
                title="任务详情"
                :visible.sync="visible"
                direction="rtl"
                size="66%"
                :modal="false"
                :before-close="handleClose">
                <el-row>
                <el-row class="pt20">
                       <el-col :span="24" style="text-align: right;margin-right: 45px;">

                           当日打卡率: {{clockRate}}
                           当日总完成度: {{completionRate}}
                       </el-col>                
                </el-row>
                <el-row class="pt20">
                    <el-tabs type="border-card" v-model="activeKey" @tab-click="handleClick" >
                        <el-tab-pane
                            v-for="item in tabs"
                            :key="item.sn"
                            :label="item.dateInfo"
                            :name="item.sn"
                        >
                        </el-tab-pane>
                        
                    </el-tabs>
                </el-row>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column
                        v-for="column in columns"
                        :key="column.prop"
                        :prop="column.prop"
                        :label="column.label">
                    </el-table-column>
                </el-table>    
                    
<!--                <el-table :data="tableData" v-loading="loading" size="mini" :show-header="true" style="width: 100%;margin-bottom: 20px;"-->
<!--                          row-key="id" border stripe default-expand-all>-->

<!--                    <div v-for="(item, index) in this.tableData" :key="index">-->
<!--                        <el-table-column width="1"></el-table-column>-->
<!--                        <el-table-column prop="realname" label="学生姓名" header-align="center" align="center"></el-table-column>-->
<!--                        <el-table-column prop="clockin_status" label="当日打卡状态" header-align="center" align="center"></el-table-column>-->
<!--                        <el-table-column prop="finish_nums" label="完成数/任务数" header-align="center" align="center"></el-table-column>-->
<!--                        <el-table-column prop="finish_rate" label="当日完成度" header-align="center" align="center"></el-table-column>-->
<!--                    -->
<!--                    -->
<!--                        <el-table-column v-for="(items, indexs) in item.dayTaskList" :label="items.message" header-align="center" align="center">-->
<!--                            {{ items.check_status }}-->
<!--                        </el-table-column>-->
<!--                        -->
<!--                    </div>-->
<!--                    -->
<!--                </el-table>-->
                    
<!--                    <div class="block">-->
<!--                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"-->
<!--                                       :current-page="pageInfo.pageNumber" :page-sizes="[10, 50, 100, 200]"-->
<!--                                       :page-size="pageInfo.pageSize"-->
<!--                                       background layout="total, sizes, prev, pager, next, jumper"-->
<!--                                       :total="pageInfo.total">-->
<!--                        </el-pagination>-->
<!--                    </div>-->
            </el-row>
        </el-drawer>
    </div>
</template>
<script>
import {getTaskDetailByDay,getTaskDateInfo} from "@/api/kanke/exercises/task";

export default {
    name: "detail",
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        id:{
            type:[String,Number],
            default:0
        },
        firstDate:{
            type:String,
            default:''
        }
    },
    components: {
    },
    data() {
        return {
            loading: false,
            current_date:this.firstDate,
            activeKey: 'first',
            clockRate:0,
            completionRate:0,
            tabs:[],
            first:"",
            // first:"07-22 周一",
            second:'',
            third:'',
            fourth:'',
            fifth:'',
            sixth:'',
            form:{},
            tableData: [],
            columns:[]
        }
    },
    watch: {
        
        activeKey:{
            handler(newVal,oldVal){
                console.log('label change from',oldVal,'to',newVal);
                this.init();
            },
            immediate: true
        },
        
    },
    created() {
        this.getTaskDateInfo();
        //this.init();
    },
    methods: {
        async init() {
            this.loading = true
            console.log('init',this.current_date);
            getTaskDetailByDay({id:this.id,'current_date':this.current_date}).then((res) => {
                console.log(res)
                this.tableData = res.data.list;
                this.columns = res.data.columns;
                // this.pageInfo.total = res.data.total;
                this.clockRate = res.data.clockRate;
                this.completionRate = res.data.completionRate;
                
                this.loading = false;
            })
            
            this.loading = false
        },
        getTaskDateInfo(){
            getTaskDateInfo({id:this.id}).then((res) => {
                console.log('date info',res)
                if(res.code == 200){
                  this.tabs = res.data.list;
                  this.current_date = res.data.list[0].date;
                }

            })
        },
        //选中标签
        handleClick(tab, event) {
            console.log('current tab',tab);
            this.activeKey = tab.name;
            for(let i=0;i<this.tabs.length;i++){
                if(this.tabs[i].sn == tab.name){
                    this.current_date = this.tabs[i].date;
                    break;
                }
            }
            this.init();
        },
        //关闭
        handleClose(){
            this.$emit('update:visible', false);
        },
        handleSelectionChange(val) {
            console.log('当前选中行',val);
            this.multipleSelection = val
            console.log('multipleSelection val',this.multipleSelection);
        },
    }
}
</script>
<style lang="scss" scoped>
</style>